(function($){


  function process(){
    function hide(that){
      $(that).find(".description").hide(0, "linear", function () {
        $(that).css({
          "position": "initial",
          "top": null,
          "left": null,
          "right": null,
          "z-index": 0
        })
      });
    }


    $(".process-card").mouseover(function(){
      $(this).css({"position":"absolute","top":0,"left":'0.25rem',"right":'0.25rem',"z-index":888});

      //$(this).find(".description").collapse('show');
      $(this).find(".description").show();
    })
    $(".process-card").mouseleave(function(){
      var that = this;
      $(this).css("z-index",100);
      //$(this).find(".description").collapse("hide");
      hide(that);
    })

    /*
    $(".process-card").click(function(){
      var that = this;
      console.log($(that).find(".description").is(":hidden"))
      if(!$(that).find(".description").is(":hidden")){
        $(that).css("z-index", 100);
        hide(that);
      }
    })*/
  }

  process();


  $.get("https://niuxx.oss-cn-beijing.aliyuncs.com/data.json", function (data) {
    console.log(data);

    project(data.projects);
    team(data.team);


    shuffle();
    fancybox();
    adaptiveBackground();
  })

  
  function team(data){

    data.forEach(function(item){
      fill(item);
    })

    function fill(item){

      var template = $("#team-grid .picture-item:eq(0)");
      template = template.clone(false,true);
      //console.log(template);

      template.find('[data-fancybox="images"]').attr({"href":item.avatar,"data-caption":item.description});
      template.find('.avatar').attr("src", item.avatar + "?x-oss-process=image/resize,w_200/quality,Q_90/format,jpg/interlace,1");
      template.find(".name").text(item.name);
      console.log(item);
      if(item.label){
        template.find(".name").append('<span class="ml-1 badge badge-light">'+item.label+'</span>');
      }
      template.find(".bio").text(item.bio);

      $("#team-grid").append(template);

      //console.log("mabide",template);

      template.show();
    }

    /*
    var card = $("#team .picture-item .card");

    card.mouseover(function () {
      $(this).find(".card-img-overlay .subtitle").hide();
      $(this).find(".card-img-overlay .description").show();
    })
    card.mouseleave(function () {
      $(this).find(".card-img-overlay .description").hide();
      $(this).find(".card-img-overlay .subtitle").show();
    })
    */
  }

  var advantageCard = $(".advantage-card");
  advantageCard.mouseover(function(){
    $(this).addClass("animated jello");
  })
  advantageCard.mouseleave(function(){
    $(this).removeClass("animated jello");
  })

  //手机导航栏部分
  function navbar(){
    var navbarItems = $('#navbar-items'),
      navbar = $('#navbar');
    navbarItems.on('show.bs.collapse', function () {
      navbar.addClass('bg-dark');
    })
    navbarItems.on('hidden.bs.collapse', function () {
      navbar.removeClass('bg-dark');
    })
    navbarItems.click(function () {
      navbarItems.collapse("hide");
    })
  }
  navbar();
  
  function advantage(){
    $("#collapseOne,#collapseTwo,#collapseThree,#collapseFour").on('show.bs.collapse', function () {
      var ctn = $(this).parent().find("[data-toggle='collapse']");
      ctn.find("img.active").show();
      ctn.find("img.inactive").hide();

      ctn.find('.btn-link').removeClass("text-black-50");
    })

    $("#collapseOne,#collapseTwo,#collapseThree,#collapseFour").on('hide.bs.collapse', function () {
      var ctn = $(this).parent().find("[data-toggle='collapse']");
      ctn.find("img.active").hide();
      ctn.find("img.inactive").show();

      ctn.find('.btn-link').addClass("text-black-50");
    })
  }
  advantage();
  

  function project(data){
    data.forEach(function(item){
      fill(item);
    })

    function fill(item){
      var container = $("#projects .sly .slidee"),
        template = container.find("li:eq(0)");
      console.log(template);
      template = template.clone(false,true);

      template.find(".cover").attr("src", item.cover + "?x-oss-process=image/resize,w_300/quality,Q_85/format,jpg/interlace,1");
      template.find(".title").text(item.title);
      template.find(".subtitle").text(item.subtitle);
      template.find(".description").text(item.description);

      container.append(template);
      template.show();
    }

    var $projectsWrapper = $("#projects");
    $projectsWrapper.find(".sly").sly({
      horizontal: 1,
      itemNav: 'basic',
      smart: 1,
      activateOn: 'click',
      mouseDragging: 1,
      touchDragging: 1,
      releaseSwing: 1,
      startAt: 0,
      scrollBy: 1,
      activatePageOn: 'click',
      speed: 300,
      elasticBounds: 1,
      dragHandle: 1,
      dynamicHandle: 1,
      clickBar: 1,

      scrollBar: $projectsWrapper.find('.scrollbar'),

      prevPage: $projectsWrapper.find('.controls').find('.prev-page'),
      nextPage: $projectsWrapper.find('.controls').find('.next-page')
    })

    var card = $projectsWrapper.find(".sly .card");

    card.mouseover(function(){
      var that = this;
      $(that).find(".card-img-overlay .subtitle").hide(0, "linear", function () {
        $(that).find(".card-img-overlay .description").fadeIn();
      });
      
    })
    card.mouseleave(function(){
      var that = this;
      $(that).find(".card-img-overlay .description").hide(0,'linear',function(){
        $(that).find(".card-img-overlay .subtitle").show();
      });
    })

    //console.log(card);
  }


  function adaptiveBackground(){
    $.adaptiveBackground.run({
      normalizeTextColor: true
    })
  }

  function shuffle(){
    new Shuffle(document.getElementById('team-grid'), {
      itemSelector: '.picture-item',
      sizer: document.getElementById('team-grid').querySelector('.my-sizer-element')
    });
  }

  function fancybox(){
    $('[data-fancybox="images"]').fancybox();
  }

  function scroll(){
    var scrollTop = $(this).scrollTop();

    var opacity = Math.pow(scrollTop / 500, 1.5);

    var navbar = $("#navbar");

    navbar.css("background-color", "rgba(0,0,0," + opacity + ")")
    //console.log(scrollTop, opacity);
  }
  scroll();
  //导航栏移动变色
  $(window).on('scroll',function(){
    scroll();
  })

})(jQuery)